<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Kuchi Kopi</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
        integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
        crossorigin="anonymous" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
        integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="
        crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Solway:wght@500&display=swap" rel="stylesheet">

</head>

<body>
    <nav class="navbar">
        <div class="logo">
            <h2>KUCHI KOPI</h2>
        </div>
        <a href="#" class="nav-btn">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navlinks">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="explore.html">Explore</a></li>
                <li><a href="meet.html">Meet</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>

        </div>
    </nav>

    <div id="meet-title">
        <h2>Meet the Villagers</h2>
    </div>
    <div class="row-container">
        <div class="column">
            <div class="card">
                <img src="images/bluebear.png">
                <h3>BLUEBEAR</h3>
                <ul>
                    <li> I love to overreact over nothing </li>
                    <li> My favorite song is "Only Me"</li>
                    <li> My favorite villager</li>
                </ul>
                <p class="card-text text-center"><small class="text-muted"><a
                            href="https://animalcrossing.fandom.com/wiki/Bluebear" target="_blank">Source</a></small>
                </p>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <img src="images/zucker.png">
                <h3>ZUCKER</h3>
                <ul>
                    <li>Favorite Food: Octopus</li>
                    <li>Lazy Personality</li>
                    <li>Catch Phrase: Bloop</li>
                </ul>
                <p class="card-text text-center"><small class="text-muted"><a
                            href="https://animalcrossing.fandom.com/wiki/Zucker" target="_blank">Source</a></small></p>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <img src="images/Fang.png">
                <h3>FANG</h3>
                <ul>
                    <li>Socializing? What's That</li>
                    <li>Spreading Rumors is my Passion</li>
                    <li> Black Coffee, Enough Said</li>
                </ul>
                <p class="card-text text-center"><small class="text-muted"><a
                            href="https://animalcrossing.fandom.com/wiki/Fang" target="_blank">Source</a></small></p>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <img src="images/octavian.png">
                <h3>OCTAVIAN</h3>
                <ul>
                    <li>Do I look mad? Because I'm not. </li>
                    <li>Why does everyone think I'm mad?</li>
                    <li>OK i am mad now </li>
                </ul>
                <p class="card-text text-center"><small class="text-muted"><a
                            href="https://animalcrossing.fandom.com/wiki/Octavian" target="_blank">Source</a></small>
                </p>
            </div>
        </div>


    </div>
    <div class="row">
        <div class="column">
            <div class="card">
                <img src="images/fauna.png">
                <h3>FAUNA</h3>
                <ul style="text-align: left;">
                    <li>I'm cute until we start playing Uno</li>
                    <li>Live Laugh Love</li>
                    <li>I am Normal</li>
                </ul>
                <p class="card-text text-center"><small class="text-muted"><a
                            href="https://animalcrossing.fandom.com/wiki/Fauna" target="_blank">Source</a></small></p>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <img src="images/kiki.png">
                <h3>KIKI</h3>
                <ul style="text-align: left;">
                    <li>I am cat</li>
                    <li>I don't like being pet</li>
                    <li>I like being pet</li>
                </ul>
                <p class="card-text text-center"><small class="text-muted"><a
                            href="https://animalcrossing.fandom.com/wiki/Kiki" target="_blank">Source</a></small></p>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <img src="images/judy.png">
                <h3>JUDY</h3>
                <ul style="text-align: left;">
                    <li>I'm a cupcake</li>
                    <li>Snooty Personality</li>
                    <li>Live Laugh Love</li>
                </ul>
                <p class="card-text text-center"><small class="text-muted"><a
                            href="https://animalcrossing.fandom.com/wiki/Judy" target="_blank">Source</a></small></p>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <img src="images/hamlet.png">
                <h3>HAMLET</h3>
                <ul style="text-align: left;">
                    <li>I'm not short</li>
                    <li>I look tired because I am</li>
                    <li>60 Piece Nuggets </li>
                </ul>
                <p class="card-text text-center"><small class="text-muted"><a
                        href="https://animalcrossing.fandom.com/wiki/Hamlet" target="_blank">Source</a></small></p>
            </div>
        </div>




        <script src="scripts.js"></script>
</body>

</html>